<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/static/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <title>商品规格</title>
    <%@include file="/static/include/head.jsp" %>
	<script type="text/javascript" src="${ctx }/static/jquery/ajaxfileupload.js"></script>
    <script src="${path}/static/js/product/specificationFormTable.js" type="text/javascript"></script>
</head>

<body>
<!-- <div class="modal-content"> -->
    <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h4 class="modal-title" id="viewModalLabel">商品规格维护</h4>
    </div>
    <div class="modal-body">
    <!-- 业务表添加 -->
    <form id="inputForm" modelAttribute="specification" action="${ctx}/product/specification/save" method="post" class="form-horizontal">
        <!-- error message here -->
        <div id="messageBox" class="alert alert-warning hide"></div>
        <tags:message content="${message}"/>
        <c:if test="${param.type eq 'edit'}">
        <input type="hidden" id="id" name="id" value="${specification.id}" />
        </c:if>
        <table class="table table-bordered table-condensed dataTables-example dataTable no-footer">
            <tbody>
                <%--主键--%>
            <tr>
                <td class="width-15 active"><label class="pull-right">规格名称:</label></td>
                <td>
                    <input type="text" name="specName" value="${specification.specName}"
                           placeholder="规格名称" class="form-control  ">
                </td>

                <td class="width-15 active"><label class="pull-right">显示类型:</label></td>
                <td>
                    <input type="radio" name="specType" value="0" <c:if test="${specification.specType eq 0}">checked="checked"</c:if><c:if test="${empty specification.specType }">checked="checked"</c:if>> 文字 &nbsp;&nbsp;
                    <input type="radio" name="specType" value="1" <c:if test="${specification.specType eq 1}">checked="checked"</c:if>> 图片
                </td>
            </tr>

            <tr>
                <td class="width-15 active"><label class="pull-right">规格备注:</label></td>
                <td>
                    <input type="text" name="specMemo" value="${specification.specMemo}"
                           placeholder="规格备注" class="form-control  ">
                </td>
            </tr>
            </tbody>
        </table>
		<c:if test="${param.type eq 'edit' or param.type eq 'add'}">
        <button class="btn btn-default btn-sm" type="button" id="addBtn"><i class="glyphicon glyphicon-plus"> 增加</i></button>
        <button class="btn btn-default btn-sm" type="button" id="delBtn"><i class="glyphicon glyphicon-minus"> 删除</i> </button>
		</c:if>
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#tab-1" aria-expanded="true">规格值</a>
                </li>
                <li class="hide">
                    <a data-toggle="tab" href="#tab-2" aria-expanded="false">Other</a>
                </li>
            </ul>
            <div class="tab-content">
                <%-- dynamic tab --%>
                <div id="tab-1" class="tab-pane fade in active">
                    <div class="panel-body">
                        <table id="contentTable1" class="table table-striped table-bordered table-hover dataTable">
                            <thead>
                            <tr>
                                <%-- dynamic table header --%>
                                <%--主键不输出--%>
                                <th width="50px" title="需要批量删除时勾选">
									<input type="checkbox" />
								</th>
                                <th>规格值名称</th>
                                <!-- <th>规格图片</th> -->
                                <c:if test="${param.type eq 'edit' or param.type eq 'add'}">
                                <th width="50px">操作</th>
                                </c:if>
                            </tr>
                            </thead>
                            <tbody>
                                <%-- dynamic table content --%>
                                <c:forEach items="${specification.specValuesList}" var="specValues" varStatus="status">
	                            <tr>
                                	<td>
                                		<input type="checkbox" name="ck" value="${specValues.id }"/>
										<input type="hidden" name="specValuesList[${status.index }].id" value="${specValues.id }"/>
									</td>
							        <td>
							        	<div class="col-xs-8">
							            <input type="text" name="specValuesList[${status.index }].specValue" value="${specValues.specValue }"
							            placeholder="规格值名称" class="form-control  required ">
							            </div>
							            <c:if test="${specification.specType eq 1}">
							            <span id="specImg">
							            	<c:if test="${empty  specValues.specImage }">
							            	<img height="30" width="30" src="${path }/static/images/spec/spec_def.gif" class="img-thumbnail img-responsive spec_pic">
							            	</c:if>
							            	<c:if test="${!empty  specValues.specImage }">
							            	<c:choose>
											<c:when test="${fn:startsWith(specValues.specImage , 'http')}">
												<img height="30" width="30" src="${specValues.specImage }" class="img-thumbnail img-responsive spec_pic">
											</c:when>
											<c:otherwise>
												<img height="30" width="30" src="${ctx }${specValues.specImage }" class="img-thumbnail img-responsive spec_pic">
											</c:otherwise>
											</c:choose>
							            	</c:if>
								            <a href="javascript:;" class="upload">上传图片</a> 
									        <input type="file" name="specImgFile" id="btnfile" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png" class="hide">
											<input type="hidden" name="specValuesList[${status.index }].specImage" value="${specValues.specImage }">
										</span>
							            </c:if>
							        </td>
							        <c:if test="${param.type eq 'edit' or param.type eq 'add'}">
							        <td>
							            <a href="javascript:;" class="delete"><span class="glyphicon glyphicon-trash"></span></a>
							        </td>
							        </c:if>
	                            </tr>
	                        </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="tab-2" class="tab-pane fade">
                    <div class="panel-body">
                        <%-- other table content here --%>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <c:if test="${param.type eq 'edit' or param.type eq 'add'}">
            <button type="submit" class="btn btn-primary" onclick="doSubmit()">提交更改</button>
            </c:if>
        </div>
    </form>
    </div>
<!-- </div> -->

<%-- Modal Window (abandon)
<div class="modal fade" id="imageModal"  tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true" data-width="420">
<form id="uploadForm" action="${ctx}/product/specValues/upload" method="post" class="form-horizontal" enctype="multipart/form-data">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myModalLabel">上传图片</h4>
      </div>
      <div class="modal-body">
      从您的电脑中挑选一张图片：
      <input type="file" name="specImgFile" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png">
      <input type="hidden" name="subFolder" value="spec">
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button class="btn btn-primary" onclick="javascript:;">上传</button>
      </div>
</form>
</div>
--%>

<!-- template -->
<table style="display:none">
    <tr id="template1">
        <!-- form filed -->
        <td class="center">
			<input type="checkbox" name="ck" value=""/>
		</td>
        <td>
        <div class="col-xs-8">
            <input type="text" name="specValuesList[0].specValue" value=""
            placeholder="规格值名称" class="form-control  required ">
        </div>
        <span id="specImg">
	        <img height="30" width="30" src="${path }/static/images/spec/spec_def.gif" class="img-thumbnail img-responsive spec_pic">
	        <a href="javascript:;" class="upload">上传图片</a>
	        <input type="file" name="specImgFile" id="btnfile" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png" class="hide">
			<input type="hidden" name="specValuesList[0].specImage" value="">
		</span>
        </td>
        <td>
            <a href="javascript:;" class="delete"><span class="glyphicon glyphicon-trash"></span></a>
        </td>
    </tr>
</table>
</body>
</html>
